<template>
  <div class="hash-content">
    <div class="key">
      <div class="key-header">
        <el-row style="width: 96%;margin: 0 auto">
          <el-col :span="19">
            <el-input placeholder="搜索" size="small" prefix-icon="el-icon-search" v-model="search"></el-input>
          </el-col>
          <el-col :span="4" style="padding-left: 5px">
            <el-button size="small" @click="addHashWrapStatus = true">+</el-button>
          </el-col>
        </el-row>
        <el-dialog
            title="新建&nbsp;Hash Item-Value"
            v-model="addHashWrapStatus"
            width="40%">
          <el-form class="demo-form-inline" label-position="right" style="width: 90%;margin:0 auto;">
            <el-form-item label="Key" label-width="60px">
              <el-input v-model="createData.key" placeholder="Key"></el-input>
            </el-form-item>
            <el-form-item label="Value" label-width="60px">
              <el-input v-model="createData.content" type="text" placeholder="value"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="addHashWrapStatus = false">取 消</el-button>
              <el-button type="primary" @click="handleInsertKey">确 定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div class="key-item" ref="item-list">
        <span class="item-list" :class="{active:active===n}" v-for="n in 50" @click="handleClickItem(n)">
          item {{ n }}
        </span>
      </div>
    </div>
    <div class="content">
      <codeEditor :key="this.$store.state.editorRandKey"></codeEditor>
    </div>
  </div>
</template>

<script>
import codeEditor from "@/views/content/editor/editor";

export default {
  name: "hash_content",
  components: {
    codeEditor
  },
  data() {
    return {
      search: '',
      addHashWrapStatus: false,
      itemHeight: 100,
      createData: {
        key: 'New Item',
        ttl: '',
        content: 'New Item',
      },
      active: 0,
      content: "234",
      randKey: new Date().getTime()
    }
  },
  mounted() {
    if (this.$store.state.redisData.type === 'hash') {
      this.handleClickItem(this.$store.state.redisData.key ? this.$store.state.redisData.key : 1)
    }

  },
  methods: {
    handleInsertKey() {
    },
    handleClickItem(active) {
      this.$store.commit('changeEditorRandKey')
      this.active = active
      this.$store.state.redisData.type = 'hash'
      this.$store.state.redisData.key = active
      this.$store.state.redisData.content = JSON.stringify({'Item': active})
    },
  }
}
</script>

<style scoped lang="less">

@activeColor: rgba(66, 185, 131, 0.45);
.hash-content {
  text-align: left;
  height: 100%;
  width: calc(100% - 300px);

  .key {
    float: left;
    max-width: 20%;
    min-width: 300px;
    height: 100%;
    border-right: 1px solid #f5f5f5;
    position: relative;

    .key-header {
      height: 5%;
      width: 100%;
      background: rgb(255, 255, 255);
      position: static;
      display: flex;
      align-items: center;
      vertical-align: middle;
    }

    .key-item {
      height: 93%;
      overflow: scroll;

      .item-list {
        display: block;
        height: 30px;
        padding: 5px 15px;
        border: 1px solid #f5f5f5;

        &.active {
          background: @activeColor;
        }
      }
    }
  }

  .content {
    float: left;
    max-width: 79%;
    width: calc(100% - 301px);
    height: 100%;
    overflow: scroll;
  }
}
</style>